<template>
  <div class="fast">
    <div class="fast-top">
      <span class="fast-top_title">
        快速找药
        <p></p>
      </span>
    </div>
    <div class="fast-grid">
      <van-grid :border="false" :column-num="4">
        <van-grid-item v-for="nav in fastNav" :key="nav.id" :to="{path:`/list/${nav.id}`}">
          <van-image width="46" height="46" :src="nav.icon" />
          <span style="font-size:12px">{{nav.name}}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    fastNav: {
      type: Array,
      required: true
    }
  }
};
</script>

<style lang="less" scoped>
.fast {
  &-top {
    padding: 0 15px;
    box-sizing: border-box;
    margin: 15px 0;

    &_title {
      padding: 0 8px;
      color: #333;
      font: 18px "微软雅黑";
      position: relative;
      z-index: 1;
      p {
        content: "";
        z-index: -1;
        position: absolute;
        width: 86px;
        height: 0.2962963rem;
        left: 0;
        bottom: 0;
        box-shadow: 0.05555556rem 0.09259259rem 0.16666667rem 0
          rgba(131, 241, 219, 0.59);
        background-image: linear-gradient(90deg, #4bfdf2 0, #4bff8f 100%),
          linear-gradient(#94ffc4, #94ffc4);
      }
    }
  }
}
</style>